<template>
  <div class="infoList">
    <el-form>
      <el-form-item>
        <el-button type="primary" @click="dialogFormVisible = true"
          >新增</el-button
        >
      </el-form-item>
    </el-form>
    <el-table :data="tableData" stripe border style="width: 100%">
      <el-table-column prop="name" label="姓名" align="center">
      </el-table-column>
      <el-table-column prop="sex" label="性别" align="center">
        <template slot-scope="{ row }">
          <span v-if="row.sex === 1">男</span>
          <span v-else>女</span>
        </template>
      </el-table-column>
      <el-table-column prop="age" label="年龄" align="center">
      </el-table-column>
      <el-table-column prop="father" label="父亲" align="center">
      </el-table-column>
      <el-table-column prop="mather" label="母亲" align="center">
      </el-table-column>
      <el-table-column prop="time" label="入校时间" align="center">
      </el-table-column>
      <el-table-column prop="address" label="地址" align="center">
      </el-table-column>
      <el-table-column prop="phone" label="联系方式" align="center">
      </el-table-column>
      <el-table-column prop="address" align="center" label="操作">
        <template #default="{ row }">
          <el-button
            @click="edit(row)"
            type="primary"
            icon="el-icon-edit"
            circle
          ></el-button
          ><el-button
            @click="del(row)"
            type="danger"
            icon="el-icon-delete"
            circle
          ></el-button
        ></template>
      </el-table-column>
    </el-table>
    <!-- 添加学生信息对话框 -->
    <el-dialog
      :title="state ? '添加学生信息' : '修改学生信息'"
      :visible.sync="dialogFormVisible"
      width="500px"
      @close="onDialogClosed"
    >
      <el-form :model="form" :rules="rules" ref="former">
        <el-form-item label="姓名" label-width="80px" prop="name">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="年龄" label-width="80px" prop="age">
          <el-input v-model="form.age" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" label-width="80px" prop="sex">
          <el-radio v-model="form.sex" label="1">男</el-radio>
          <el-radio v-model="form.sex" label="2">女</el-radio>
        </el-form-item>
        <el-form-item label="父亲" label-width="80px" prop="father">
          <el-input v-model="form.father" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="母亲" label-width="80px" prop="mather">
          <el-input v-model="form.mather" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="入校时间" label-width="80px" prop="time">
          <el-date-picker
            v-model="form.time"
            align="right"
            type="date"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="家庭住址" label-width="80px" prop="address">
          <el-input v-model="form.address" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" label-width="80px" prop="phone">
          <el-input v-model="form.phone" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addeditStudent">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import { getInfo, addStudent, editStudent, deleteStudent } from "@/api/info";
import { getInfo, updateStudent, deleteStudent } from "@/api/info";
export default {
  name: "InfoList",
  data() {
    return {
      tableData: [], //学生数据
      dialogFormVisible: false, //控制学生对话框隐藏与否
      form: {
        //学生信息
        name: "",
        age: "",
        sex: "1",
        father: "",
        mather: "",
        time: "",
        address: "",
        phone: "",
      },
      state: true, //判断是添加还是修改学生信息
      rules: {
        name: [{ required: true, message: "名字是必选项", trigger: "blur" }],
        age: [{ required: true, message: "年龄是必选项", trigger: "blur" }],
        sex: [{ required: true, message: "性别是必选项", trigger: "blur" }],
        father: [
          { required: true, message: "父亲姓名是必选项", trigger: "blur" },
        ],
        mather: [
          { required: true, message: "母亲姓名是必选项", trigger: "blur" },
        ],
        time: [{ required: true, message: "日期是必选项", trigger: "blur" }],
        address: [{ required: true, message: "地址是必选项", trigger: "blur" }],
        phone: [
          { required: true, message: "联系方法是必选项", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.ongetInfo();
  },
  methods: {
    // 关闭对话框,重置表单
    onDialogClosed() {
      console.log(1);
      this.$refs.former.resetFields();
    },
    async ongetInfo() {
      const { data } = await getInfo();
      // console.log(data);
      if (data.status !== 200) return this.$message.error("数据加载失败");
      this.tableData = data.data;
    },
    edit(row) {
      this.form = { ...row };
      this.dialogFormVisible = true;
      this.state = false;
    },
    async del(row) {
      const { data } = await deleteStudent(row.id);
      if (data.status !== 200) return this.$message.error("删除学生数据失败");
      this.$message.success(data.message);
      this.tableData = this.tableData.filter((item) => {
        return item.id !== row.id;
      });
    },
    async addeditStudent() {
      if (this.state) {
        this.$refs.former.validate(async (valid) => {
          if (!valid) return this.$message.warning("学生数据校验失败");
          const { data } = await updateStudent("post", this.form);
          if (data.status !== 200)
            return this.$message.error("学生数据添加失败");
          // console.log(data);
          this.tableData = data.data;
          this.dialogFormVisible = false;
          this.$message.success("您成功添加了一条学生数据");
        });
      } else {
        const { data } = await updateStudent("put", this.form);
        if (data.status !== 200) return this.$message.error("学生数据添加失败");
        // console.log(data);
        this.tableData = data.data;
        this.dialogFormVisible = false;
        this.$message.success("修改数据成功");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.el-form-item {
  text-align: left;
}
</style>